<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生列表</title>

    <!-- js片段 -->
    <!-- jquery文件 -->
    <script src="/plugins/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <!-- 1.最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 2.bootstraptable文件 -->
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">

    <!-- 3.自己的css文件 -->
    <link rel="stylesheet" href="/css/list.css">



</head>

<body>

<!-- 查询 -->
<form id="form">
    <div class="form-group">查询方式：
        <label for="InputName">
            <select class="form-control" id="searchOp" name="op">
                <option value="id">教师id</option>
                <option value="name">教师姓名</option>
                <option value="no">教师编号</option>
            </select></label>

        <input type="text" class="form-control" id="InputName" placeholder="content">
        <button type="button" class="btn btn-success" onclick="searchTeacher()">提交</button>
        <a href="#" class="btn btn-success" onclick="reload()">刷新重置</a>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  id="addButton" onclick="changeFun()">
            新增教师信息
        </button>
    </div>
</form>

<!-- 设计表格 -->
<table class="table table-striped" id="teachers">

</table>

<!-- 新增学生信息表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">教师信息</h4>
            </div>
            <div class="modal-body">
                <form id="formTeacher">
                    <input hidden="hidden" id="id" name="id">
                    <div class="form-group">
                        <label for="no">编号:</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="No">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别:</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄:</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="Age">
                    </div>
                    <div class="form-group">
                        <label for="major">专业:</label>
                        <input type="text" class="form-control" id="major" name="major" placeholder="major">
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                    </div>
                    <div class="modal-footer" id="buttons">
                        <button type="submit" class="btn btn-primary"  id="saveButton" onclick="insertTeacher()">保存</button>
                    </div>
                </form>

            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- js片段 -->
<!-- 1.自己写的list.js文件 -->
<script type="text/javascript" src="/js/admin/teacherPage.js"></script>
<!-- 2.最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- 3.bootstraptable文件 -->
<script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 4.jqvalidate文件 -->
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
<!-- 5.自己写的js -->
<script>
    // 表单验证
    $().ready(function (){
        // - 设置表单验证规则和提示
        $("#formTeacher").validate({
            debug:true, // 不提交表单
            rules: {
                no: {// 学号
                    required: true,
                    minlength: 9,
                    maxlength: 9
                },
                name: {
                    required: true,
                    minlength: 2
                },
                age: {
                    required: true,
                    min: 25,
                    max: 70
                },
                major: {
                    required: true,
                },
            },
            messages: {
                no: {
                    required: "请输入教师编号",
                    minlength: "教师编号必须由9个字符组成"
                },
                name: {
                    required: "请输入教师姓名",
                    minlength: "教师姓名必须至少由两个字符组成"
                },
                age: {
                    required: "请输入教师年龄",
                    min: "教师年龄不能小于 25 ",
                    max: "教师年龄不能大于 70 "
                },
                major: {
                    required: "请输入教师专业",
                }

            }
        });
        // - 清空表单验证信息和表单数据
        $("#addButton").click(function() {
            $("#formTeacher").validate().resetForm();
            $("#formTeacher")[0].reset();
        });
    })

    // 查询学生信息
    function searchTeacher() {
        var op = document.getElementById("searchOp").value;
        var content = document.getElementById("InputName").value;
        $("#teachers").bootstrapTable('refresh', {url: "/webapi/teacher/getby"+ op +"/"+ content});
    }

    // 更改“保存”按钮的函数
    function changeFun(){
        var element = document.getElementById("saveButton");
        element.setAttribute("onclick", "insertTeacher()");
    }

    // 编辑学生信息
    function editTeacher(id){
        // - 清空表单验证信息和表单数据
        $(function() {
            $("#formTeacher").validate().resetForm();
            $("#formTeacher")[0].reset();
        });
        $("#myModal").modal('show');
        $.ajax({
            url: "/webapi/teacher/getinfo/" + id,
            type: "get"
        }).done(function (rs){
            $("#id").val(rs.id);
            $("#no").val(rs.no);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#major").val(rs.major);
        })
        // 更改“保存”按钮的函数
        var element = document.getElementById("saveButton");
        element.setAttribute("onclick", "updateTeacher()");
    }

    // 保存编辑后的学生信息
    function updateTeacher(){
        var data = $("#formTeacher").serialize();
        console.log(data);
        $.ajax({
            url: "/webapi/teacher/update/",
            method: "post",
            data: data
        }).done(function (){
            // 刷新table里面的数据
            $("#teachers").bootstrapTable('refresh', {url: "/webapi/admin/getallteacher"});
            $('#myModal').modal('hide');
        })
    }

    // 删除学生信息
    function deleteTeacher(id){
        if (confirm("是否真的要删除!")){
            $.ajax({
                url: "/webapi/teacher/delete/" + id,
                method: "delete",
            }).done(function (){
                $("#teachers").bootstrapTable('refresh', {url: "/webapi/admin/getallteacher"});
            })
        }

    }

    function insertTeacher(){
        var data = $("#formTeacher").serialize();

        $.ajax({
            url: "/webapi/teacher/insertTeacher/",
            method: "post",
            data: data
        }).done(function (){
            $("#teachers").bootstrapTable('refresh', {url: "/webapi/admin/getallteacher"});
            $('#myModal').modal('hide')
        })
    }

    function reload(){
        $("#teachers").bootstrapTable('refresh', {url: "/webapi/admin/getallteacher"});
    }
</script>
</body>




